<template>
	<view class="header-class tn-flex justify-end" >
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
		<!-- <view class="tn-ml-sm tn-text-bold tn-text-lg tn-gray-light_text tn-flex ">
			<span>{{hz.businessname}}</span>
			<tn-icon name="down-triangle" size="40" />
		</view> -->
		<view class="">
			<tn-navbar bg-color="tn-type-primary_bg"  home-icon="" > 请选择商品 </tn-navbar>
			<tn-search-box
				v-model="searchValue"
				@search="searchBtnClickEventPage"
				@confirm="searchBtnClickEventPage"
				:focus="true"
				size="sm"
				placeholder="搜索关键词,检索品种"
				placeholder-icon="search"
				border-color="#FFFFFF"
				text-color="#FFFFFF"
				placeholder-color="#FFFFFF"
				class="search-class tn-m-sm tn-text-bold tn-text-2xl"
				search-button-bg-color="#6bb7ec"
				shape="round"
				/>
		</view>
		
		
	</view>
	
	<view class="tn-flex tn-p-sm tn-flex-wrap">
		<view v-for="(item,index) in searchData" class="tn-pr-sm tn-pt-sm">
			<tui-tag type="danger" plain @click="clickTag(item)">{{item.text}}</tui-tag>
		</view>
	</view>


</template>

<script setup>
	import { ref,reactive,onMounted} from "vue"
	import { postCall  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import {userAllDataStore} from '@/stores'
	const store = userAllDataStore();
	const searchValue = ref('');
	const searchBtnClickEventPage = () =>{
		console.log("=====");
		EventBus.emit('goodsInfo',searchValue.value);
		uni.navigateBack();
	}
	const clickTag = (item) =>{
		searchValue.value = item.text;
		console.log(item.text)
		// store.state.tempSearchValue = item.text;
		EventBus.emit('goodsInfo',searchValue.value);
		uni.navigateBack();
	}
	onMounted(() => {
	    doGetSearch();
	});
	const searchData = reactive([]);
	let doGetSearch = () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_CLASSIFY";
		params["P_ACTION"] = "SEARCHHIS";		
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(searchData,res.data.DATASET)
					console.log(searchData);
				}
			}
		})
	}
</script>

<style scoped>
	page{
		overflow-x: hidden;
	}
	
	
	.header-class-app{
		height: 14vh !important;
		flex-direction: column
	 } 
	
	.header-class-wechat{
		height: 17vh !important;
		flex-direction: column
	}
	.header-class{
		height: 20vh !important;
		flex-direction: column;
		color: #fff;
	}
	
	.search-class{
		/* background-color: #ffffff; */
		font-size: 0.875rem !important;
	}
	.icon-class{
		width: 15vw;
	}
	
	.dropdown-menu {
	  position: relative;
	  width: 30vw;
	}
	.dropdown-menu-item {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}	
	
	
	.dropdown-content {
	  width: 90vw;
	  height: 500rpx;
	  background-color: #FFFFFF;
	}
	.uni-scroll-view-content{
		width: 90vw !important;
	}
	.tn-dropdown__content{
		width: 90vw !important;
		background-color: #000000 !important;
	}
	.image-class{
		width: 100%;
		height: 100%;
	}
	
	.modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	
	.preview-image {
		max-width: 80%;
		max-height: 50%;
		object-fit: contain;
		position: absolute; 
	}
	
	.card-class{
		position: relative;
	}
	.card-icon-class{
		position: absolute;
		bottom: 30px; 
		right: 20px;
	}
	.input-class{
		width: 40vw;
	}
	
	.tn-form-item{
		margin-bottom: 0.2rem !important;
	}
	.cards-class{
		
	}
	
	.popup-class{
		text-align: center;
		overflow-y: auto;
	}
	.popup-class-title{
		width: 80vw;
		text-align: left;
		overflow-y: auto;
	}
	.num-class{
		display: flex;
	}
	.search-his-class{
		height: 10vh;
	}
</style>